﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
}
<div class="container-div" id="devicePreview-vue">
    <div class="currentOrderInfo">
        <el-row :gutter="20">
            <el-col :span="6">
                <span>订单编号：</span>
                <span>{{currentOrderInfo.OrderCode}}</span>
            </el-col>
            <el-col :span="6">
                <span>物料名称：</span>
                <span>{{currentOrderInfo.MaterialName}}</span>
            </el-col>
            <el-col :span="6">
                <span>订单状态：</span>
                <span>{{currentOrderInfo.OrderCurrentStatus}}</span>
            </el-col>
            <el-col :span="6">
                <span>当前工件编号：</span>
                <span>{{currentOrderInfo.productionCode}}</span>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <span>发送时间：</span>
                <span>{{currentOrderInfo.SendTime}}</span>
            </el-col>
            <el-col :span="6">
                <span>计划投产数量：</span>
                <span>{{currentOrderInfo.MaterialQuantity}}</span>
            </el-col>
            <el-col :span="6">
                <span>计划生产数量：</span>
                <span>{{currentOrderInfo.PlaneQuantity}}</span>
            </el-col>
            <el-col :span="6">
                <span>计划批次数量：</span>
                <span>{{currentOrderInfo.BatchQuantity}}</span>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <span>订单进度：</span>
                <span>{{currentOrderInfo.orderProgress}}</span>
            </el-col>
            <el-col :span="6">
                <span>完成数量：</span>
                <span>{{currentOrderInfo.FinishedQuantity}}</span>
            </el-col>
            <el-col :span="6">
                <span>次品数量：</span>
                <span>{{currentOrderInfo.DefectQuantity}}</span>
            </el-col>
            <el-col :span="6">
                <span>最后更新时间：</span>
                <span>{{currentOrderInfo.UpdateTime}}</span>
            </el-col>
        </el-row>
    </div>
    <div class="lineBaseInfo">
        <h1>产线基本信息</h1>
    </div>
</div>

<script>
    let app = new Vue({
        el: "#devicePreview-vue",
        data: {
            currentOrderInfo: {
                OrderCode: '',
                MaterialName: '',
                OrderCurrentStatus: '',
                productionCode: '',
                SendTime: '',
                MaterialQuantity: '',
                PlaneQuantity: '',
                BatchQuantity: '',
                orderProgress: '',
                FinishedQuantity: '',
                DefectQuantity: '',
                UpdateTime:''
            }
        },
        methods: {
            // 获取当前加工订单基本信息和产线基本信息
            InitData() {
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/GetLineStatusPreview")'
                axios.get(url, {
                    params: {
                        lineName:'一级壳体'
                    }
                }).then(res => {
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        mounted() {
            this.InitData();
        }
    })
</script>

